<template>
  <div class="bigBox">
     <teleport to=".header">
      <shopHeader title="注册" />
    </teleport>

    <!-- 步骤条 -->
    <div class="regBox">
      <van-steps 
        :active="active" 
        active-icon="success" 
        active-color="#07c160">
          <van-step>手机号</van-step>
          <van-step>验证码</van-step>
          <van-step>密码</van-step>
          <van-step>注册完成</van-step>
      </van-steps>

        <div class="steps">
        <div class="tel" v-if="active === 0">
          <van-form @submit="active = 1" >
            <van-cell-group inset>
              <van-field
                autocomplete="off"
                v-model="userInfo.tel"
                name="tel"
                label="手机号"
                placeholder="手机号"
                :rules="[{ validator: testTel, trigger: 'onChange' }]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button :disabled="is_telbtn" round block type="success" native-type="submit"> 下一步</van-button>
            </div>
          </van-form>
        </div>

        <div class="msg" v-if="active === 1">
          <van-form @submit="codeHandler" >
            <van-cell-group inset>
              <div class="code">
                <van-field
                autocomplete="off"
                v-model="userInfo.telcode"
                name="tel"
                label="短信验证码"
                placeholder="请输入短信验证码"
                />
                <van-button v-if="telcodeBtn" @click="sendcodeHandler" type="primary" size="small" class="codebtn">发送验证码</van-button>
                <van-button v-else disabled type="primary" size="small" class="codebtn">{{ time }} 秒以后再次发送</van-button>
              </div>
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="success" native-type="submit"> 下一步</van-button>
            </div>
          </van-form>
        </div>

        <div class="pass" v-if="active === 2">
          <van-form @submit="regHandler" >
            <van-cell-group inset>
              <van-field
                autocomplete="off"
                v-model="userInfo.password"
                name="tel"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button :disabled="!userInfo.password" round block type="success" native-type="submit"> 下一步</van-button>
            </div>
          </van-form>
        </div>

        <div class="successBtn" v-if="active === 3">
          <div class="ico">
            <van-icon class="success" size="60px" name="success" />
            <p>完成注册</p>
          </div>
          <p class="text">点击 <router-link to="/login">返回到登录页</router-link> </p>
        </div>
      </div>
    </div>
  </div>
   
    
</template>
<script lang="ts" setup>
import { showFailToast } from 'vant'

import { testTelHanlder, msgcodeHandler, telcodeHandler, regfinishHandler} from '../../request/user'
import shopHeader from "../../components/header.vue"
import { ref } from "vue"

interface User{
  tel: string,
  telcode: string,
  password: string
}

interface ResponseTel{
  code?: string
  message?: string
  [key:string]: any
}
const is_telbtn = ref<boolean>(true)
const active = ref<number>(0)
const userInfo = ref<User>({tel: '', telcode:'', 'password':''})
const telcodeBtn = ref<boolean>(true)
let time = ref<number>(60)

// 验证手机号
const testTel = async (val: string) => {

  if (!val) return '请填写手机号'
  if (!/^\d{11}$/.test(val)) return '请填写合法的手机号'

  const res = await testTelHanlder(val)
  if ((res as unknown as ResponseTel).code === '10005'){
    return '该手机号已经被注册'
  }else{
    is_telbtn.value = false
    return true
  }
}

// 发送短信验证码
const sendcodeHandler = async () => {
  console.log(time.value)
  telcodeBtn.value = false
  
  const timer: number = setInterval(() => {
    time.value--

    if(time.value <= 0){
      clearInterval(timer)
      telcodeBtn.value = true
    }  
  },1000)

  const res = await msgcodeHandler(userInfo.value.tel)
  console.log(res)
}

// 验证验证码是否正确
const codeHandler = async () => {
  const res = await telcodeHandler(userInfo.value.tel, userInfo.value.telcode)

  if((res as ResponseTel).code !== '200') return showFailToast('验证码错误')

  active.value = 2
}

// 完成注册
const regHandler = async () => {
  const res = await regfinishHandler(userInfo.value.tel, userInfo.value.password)
  if((res as ResponseTel).code !== '200') return showFailToast('注册错误')
  active.value = 3
}
</script>

<style scoped lang="scss">
.successBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  .ico{
    color: #fff;
    border-radius: 10px;
    width: 120px;
    height: 120px;
    background-color:#00c469;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p{
      font-size: 18px;
      margin-top: 10px;
    }
  }
  .success{
    background-color: #fff;
    color: #00c469;
    border-radius: 50%;
  }
}
.steps{
  margin-top: 20px;
}
.code{
  position: relative;
  .codebtn{
    position: absolute;
    top: 5px;
    right: 0;
  }
}
.bigBox{
  height: 100%;
  width: 100%;
  position: relative;
}
.regBox{
  position: absolute;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  top: 50%;
  transform: translateY(-70%);
}
.text{
  margin-top: 10px;
  font-size: 18px;
}
</style>
